<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .container {
            width: 600px;
            margin: 0 auto;
            padding: 20px 0;
        }

        .container-input {
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container-input input {
            width: 480px;
            height: 40px;
            border-radius: 5px;
            font-size: 18px;
            padding-inline: 5px;
        }

        .container-input button {
            width: 120px;
            height: 40px;
            background-color: orange;
            color: white;
            border: none;
            border-radius: 5px;
            
        }
        .container-input button:active {
            background-color: #666;
        }

        .container-list {
            display: flex;
            justify-content: center;
            align-items: center;
            
        }
        .container-list>.todo, .done {
            width: 50%;
            height: 40px;
        }

        .container-list h3 {
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: white;
            background-color: rgb(29, 28, 28);
        }
        .container-list .row {
            width: 100%;
            height: 40px;
            background-color: aliceblue;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 5px;
        }
        .row button {
            width: 50px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div class="container ">
        <div class="container-input">
            <input type="text" id="task">
            <button id="submit">提交</button>
        </div>
        <div class="container-list">
            <div class="todo">
                <h3>未完成</h3>
                <!-- <div class="row">
                    <input type="checkbox">
                    <span>任务</span>
                    <button>删除</button>
                </div> -->
            </div>
            <div class="done">
                <h3>已完成</h3>
                
            </div>
        </div>
    </div>
</body>
<script>
    // 1. 获取相关的标签
    let taskEl = document.querySelector('#task');
    let submitEl = document.querySelector('#submit');
    let todoEl = document.querySelector('.todo');
    let doneEl = document.querySelector('.done');
    // 2. 绑定事件
    submitEl.onclick = function () {
        let task = taskEl.value;
        // 非空校验
        if (task == '') {
            alert('请输入任务内容');
        }
        // 创建任务行
        // <div class="row">
        //     <input type="checkbox">
        //     <span>任务</span>
        //     <button>删除</button>
        // </div>
        // 创建标签
        let divEl = document.createElement('div');
        // 设置类名
        divEl.className = 'row';
        // 创建checkbox
        let checkboxEl = document.createElement('input');
        checkboxEl.type = 'checkbox';
        // 创建span 
        let spanEl = document.createElement('span');
        // 设置任务内容
        spanEl.innerHTML = task;
        // 创建删除按钮
        let deleteBtnEl = document.createElement('button');
        deleteBtnEl.innerHTML = '删除';
        // 添加子元素
        divEl.appendChild(checkboxEl);
        divEl.appendChild(spanEl);
        divEl.appendChild(deleteBtnEl);
        // 加入到任务列表
        todoEl.appendChild(divEl);

        // 绑定事件
        checkboxEl.onclick = function () {
            if (checkboxEl.checked) {
                doneEl.appendChild(divEl);
            } else {
                todoEl.appendChild(divEl);
            }
        }

        // 删除
        deleteBtnEl.onclick = function () {
            // 通过当前元素去找父标签
            let parent = divEl.parentElement;
            // 删除元素
            parent.removeChild(divEl);
        }
    }

    
</script>
</html>